<template>
  <div class="home">
    <h1 style="text-align: center">留言板</h1>
    <div class="box">
      <el-input
        style="
          width: 90%;
          margin-left: 5%;
          text-align: center;
          margin-top: 20px;
        "
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
        @change="sortIndeof"
        :rules="{
          required: this.textarea == '八维' || '上地' ? true : false,
          message: '请输入您的称呼',
          trigger: 'blur',
        }"
      >
      </el-input
      ><br />
      <el-button
        style="margin-left: 5%; margin-top: 20px"
        type="primary"
        @click="addComment"
        >发布留言</el-button
      >
      <div class="comment" style="margin-left: 5%; margin-top: 20px">
        <div v-for="item in list" :key="item.id">
          <h3>{{ item.username }}</h3>
          <span>{{ item.comment }}</span>
          <div style="margin-left: 10%; margin-top: 10px">
            <h3>司马老贼{{ item.id }}</h3>
            大司马{{ item.comment }}我能大家报hi按实际课代表爸看见{{
              item.comment
            }}实际课代
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :label="'名称'"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
          :rules="{
            required: true,
            message: '请输入您的称呼',
            trigger: 'blur',
          }"
        >
          <el-input v-model="domain.value"></el-input>
        </el-form-item>
        <el-form-item
          prop="email"
          label="邮箱"
          :rules="[
            {
              required: true,
              message: '请输入合法邮箱地址,一边在收到回复时邮件通知',
              trigger: 'blur',
            },
            {
              type: 'email',
              message: '请输入合法邮箱地址,一边在收到回复时邮件通知',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <el-input v-model="dynamicValidateForm.email"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ApigetList, ApiaddComment } from "../api/index";
export default {
  data() {
    return {
      num: 0,
      list: [],
      username: "sun1233",
      textarea: "",
      dialogVisible: false,
      dynamicValidateForm: {
        domains: [
          {
            value: "",
          },
        ],
        email: "",
      },
    };
  },
  mounted() {
    ApigetList().then((res) => {
      console.log(res);
      if (res.data.code === 200) {
        this.list = res.data.list;
      }
    });
  },
  methods: {
    addComment() {
      this.num += 1;
      console.log(this.num);
      if(this.num>4){
        //23、如何防止用户在短时间内连续多次发送评论请求
        alert('连续发送的请求太多了休息休息吧')
      }
      if (this.textarea != "") {
        if (!localStorage.getItem("token")) {
          this.dialogVisible = true;
        } else {
          let comment = this.textarea;
          let username = this.username;
          ApiaddComment({ comment, username }).then((res) => {
            console.log(res);
          });
        }
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    sortIndeof() {
      //22、考虑评论内容出现敏感信息时的处理（比如：八维、上帝等）
      if (this.textarea === "八维" || this.textarea === "上帝") {
        this.$message({
          message: "不能出现输入敏感词汇哦如：八维，上帝等",
          type: "warning",
        });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html,
body,
.home {
  width: 100%;
  height: 100%;
}
.home {
  background-color: #eee;
}
.box {
  width: 65%;
  height: 680px;
  margin: 80px auto;
  background-color: #fff;
}
</style>